<script setup>
import {useUserStore} from "@/stores/counter";
import { computed, watch } from "vue";
import { ref } from "vue";
const userStore = useUserStore();

const userMsg = computed(()=>userStore.userMsg);

const avatar = ref(userMsg.value.avatar || "https://avatars.githubusercontent.com/u/72015883?v=4");

watch(()=>userMsg.value.avatar,(val)=>{
  avatar.value = val;
})

// 退出
function exit(){
  // 持久化存储状态
  localStorage.removeItem("userMsg");
  // 修改状态管理器中的用户信息状态
  userStore.change_userMsg( null );
}
</script>

<template>
    <div style="display: flex; align-items: center">
      <el-popover
        :width="300"
        popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
      >
        <template #reference>
          <el-avatar :src="avatar" />
        </template>
        <template #default>
          <div
            class="demo-rich-conent"
            style="display: flex; gap: 16px; flex-direction: column"
          >
            <el-avatar
              :size="60"
              :src="avatar"
              style="margin-bottom: 8px"
            />
            <div>
                <span @click="$router.push('/myinfo')">个人信息</span>
                <el-button type="info" @click="exit">退出</el-button>
            </div>
          </div>
        </template>
      </el-popover>
    </div>
</template>